<template>
	<view class="item" v-if="commentId">
		<view class="avatar"><image :src="info.avatarUrl?info.avatarUrl:(info.sex=='2'?'/static/user/avatar_gril.png':'/static/user/avatar_boy.png')"></image></view>
		<view class="comment-info">
			<view class="nickname-like">
				<view class="nickname">{{ info.nikeName?info.nikeName:'匿名' }}</view>
				<view class="like">
					<text :class="likeFlag?'text-red basefont icon-like-fill':'text-gray basefont icon-like'" @click="commentLike()"></text>
					<text style="padding-left: 5rpx;" class="text-gray" v-if="likeCount&&likeCount>0">{{ likeCount }}</text>
				</view>
			</view>
			<view class="comment-desc" @click="gotoDetail(false)">
			{{ info.commentContent }}
			<text class="text-gray" v-if="showReply">@{{info.parentNikeName?info.parentNikeName:'匿名'}}:</text>
			<text v-if="showReply">{{info.parentContent}}</text>
			</view>
			<view class="date-reply">
				<view class="date">
				<view style="font-size: 24rpx;" >{{ info.commentTimeText }}</view>
				<view class="round" @click="gotoDetail(true)" style="background-color: #e6e6e6; margin-left: 20rpx;width: 80rpx;height: 36rpx;display: flex;align-items: center;justify-content: center;vertical-align:middle;"><text class="text-black" style="font-size: 24rpx;">回复</text></view>
				</view>
				<view class="reply" @click="openReport"><text class="basefont icon-close"></text></view>
				
			</view>
			<view class="reply-count" v-if="info.replyCount > 0" @click="gotoDetail(false)">
				全部{{ info.replyCount }}条回复 >
			</view>
		</view>
		<uni-popup  ref="reportPopup" type="center" >
			<view style="width: 720rpx;" class="bg-white">
				<view class="cu-form-group" style="margin: 0 20rpx 0 20rpx;padding: 0 120rpx 0 120rpx;">
					<view class="text-lg" @tap="addReport('地域攻击')">
						地域攻击
					</view>
					<view class="text-lg" @tap="addReport('无端谩骂')">
						无端谩骂
					</view>
				</view>
				<view class="cu-form-group" style="margin: 0 20rpx 0 20rpx;padding: 0 120rpx 0 120rpx;">
					<view class="text-lg" @tap="addReport('营销诈骗')">
						营销诈骗
					</view>
					<view class="text-lg" @tap="addReport('淫秽色情')">
						淫秽色情
					</view>
				</view>
				<view class="cu-form-group" style="margin: 0 20rpx 0 20rpx;padding: 0 120rpx 0 120rpx;">
					<view class="text-lg" @tap="addReport('反动谣言')">
						反动谣言
					</view>
					<view class="text-lg" @tap="addReport('政治敏感')">
						政治敏感
					</view>
				</view>
				<view class="cu-form-group" style="margin: 0 20rpx 0 20rpx;padding: 0 120rpx 0 120rpx;">
					<view class="text-lg" @tap="addReport('内容虚假')">
						内容虚假
					</view>
					<view class="text-lg" @tap="addReport('广告软文')">
						广告软文
					</view>
				</view>
				<view class="cu-form-group" style="margin: 0 20rpx 0 20rpx;padding: 0 120rpx 0 120rpx;">
					<view class="text-lg" @tap="addReport('其他原因')">
						其他原因
					</view>
					<view class="text-lg" @tap="addReport('违规用户')">
						违规用户
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/api/system/article.js';
	export default {
		props: {
			info: {
				type: Object,
				default: function(e) {
					return {}
				}
			},
			gotoFlag:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				commentId:null,
				likeFlag:false,
				likeCount:0,
				showReply:false
			}
		},
		onReady() {
			if(this.info){
				console.log(this.info)
				this.likeFlag = this.info.likeFlag
				this.commentId = this.info.commentId
				this.likeCount = this.info.likeCount?this.info.likeCount:0
				if(this.info.replyFlag=='1'){
					if(this.info.parentCommentId!=this.info.replyId){
						this.showReply = true
					}else{
						this.showReply = false
					}
				}else{
					this.showReply = false
				}
				console.log(this.showReply)
			}
		},
		methods: {
			/*评论点赞*/
			commentLike() {
				const data = {}
				data.commentId =this.commentId
				let likeApi = ''
				if(this.likeFlag){
					likeApi = api.commentDelLike
				}else{
					likeApi = api.commentLike
				}
				this.$http.post(likeApi, data).then(res => {
					this.likeFlag = !this.likeFlag
					let likeCount =this.likeCount
					if(this.likeFlag){
						likeCount = likeCount+1
					}else{
						if(likeCount>0){
							likeCount = likeCount-1
						}
					}
					this.likeCount=likeCount
				}).catch(error => {
					
				})
				
			},
			/*回复*/
			onReply(){
				this.$emit('reply', this.info);
			},
			gotoDetail(flag){
				if(this.gotoFlag){
					const data = Object.assign({},this.info)
					data.openAddComment = flag
					this.$Router.push({ name:'commentDetail', query:data})
				}else{
					this.onReply()
				}
			},
			/*举报*/
			openReport(){
				this.$refs.reportPopup.open()
			},
			/*添加举报*/
			addReport(reportReason){
				const data = {}
				data.commentId =this.commentId
				data.reportReason=reportReason
				this.$http.post(api.commentReport, data).then(res => {
					this.$refs.reportPopup.close()
				}).catch(error => {
					
				})
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
.item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20rpx 0 10rpx;	
	.avatar {
		flex-grow: 0;
		flex-shrink: 0;
		margin-right: 20rpx;
		image {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
	}
	.comment-info {
		flex-grow: 1;
		flex-shrink: 1;
		.nickname-like {
			display: flex;
			justify-content: space-between;
			.nickname {
				font-size: 28rpx;
				color: #444;
				font-weight: bold;
			}
			.like {
				display: flex;
				align-items: center;
				.like-count {
					color: #999;
					font-size: 28rpx;
				}
			}
		}
		.comment-desc {
			color: #444;
			font-size: 28rpx;
			line-height: 1.6;
			margin-top: 15rpx;
		}
		.reply-count {
			background: #f2f2f2;
			padding: 8rpx 20rpx;
			font-size: 24rpx;
			color: #999;
			margin: 20rpx 0 24rpx;
		}
		.date-reply {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.date {
				display: flex;
				align-items: center;
				justify-content:flex-start;
				color: #b4b4b4;
				font-size: 26rpx;
				margin-right: 20rpx;
				margin-top: 4rpx;
			}
			.reply {
				flex-grow: 0;
				flex-shrink: 0;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
}
</style>
